<template>
      <div class="tab-bar-item" @click="itemClick">
        <div v-if="!isActive"><slot name="item-icon"></slot></div>
        <div v-else><slot name="item-icon-active"></slot></div>
        <div :style="activeStyle"><slot name="item-text"></slot></div>
        <!-- <div :class="{active:isActive}"><slot name="item-text"></slot></div> -->
      </div> 
</template>
<script>
    export default {
        name:"TabBarItem",
        props:{
            path:String,
            activeColor:{
                type:String,
                default:'red'
            }
        },
        data(){
            return{
            }
        },
        computed:{
            isActive(){
                // 动态的去决定isActive:true ,false
                //  /home -> item(/home) = true
                return this.$route.path.indexOf(this.path) !== -1
            },
            activeStyle(){
                return this.isActive ? {color:this.activeColor} : {}
            },
        },
        methods:{
            itemClick(){
                this.$router.replace(this.path)
            }
        }
    }
</script>

<style scope>
 .tab-bar-item{
     flex: 1;
     text-align: center;
     height: 13.333vw;
     font-size: 2.667vw;
     font-weight: 700;
     color: #c6c8d5;
     /* margin-bottom: 1.067vw; */
  }
.tab-bar-item img{
     height: 5.333vw;
     width: 5.333vw;
     margin-top: 2.133vw;
     /* 去掉图片本身本身下面的三个像素 */
     vertical-align: middle;
     margin-bottom: 0.533vw;
   }
</style>